<template>
  <div id="app">
    <div :class="showBox" ref="RedPacketBox">
    </div>
    <div v-if="boxShow">
      <div class="transformB 1" :class="{ show: boxShowImager }">
        <img v-if="isSafari" src="~/@/assets/images/red_packet/01.png" @click="openCountdown"
             style="width:65%"
        />
        <img v-else src="~/@/assets/images/red_packet/01.png" @click="openCountdown"
        />
      </div>
      <!--取消点击事件  @click="openCountdown1"-->
      <div
        class="transformT"
        :class="{ show: boxShowImager1 || boxShowImager2 }"
      >
        <div v-if="isSafari">
          <img
            class="img-1"
            :class="{ hide: boxShowImager2 }"
            src="~/@/assets/images/red_packet/04.png"
            style="width:71%"
          />
          <img
            class="img-2"
            :class="{ show: boxShowImager2 }"
            v-if="wallpaper" :src="wallpaper.path"
            style="width:71%"
          />
        </div>
        <div v-else>
          <img
            class="img-1"
            :class="{ hide: boxShowImager2 }"
            src="~/@/assets/images/red_packet/04.png"
          />
          <img
            class="img-2"
            :class="{ show: boxShowImager2 }"
            v-if="wallpaper" :src="wallpaper.path"
          />
        </div>
        <img v-if="wallpaper" :src="wallpaper.wallpaper"
             ref="toast" v-show="false">
      </div>
      <div
        class="transformB 2"
        :class="{ show: boxShowImager3 }"
        @click="submitForm"
      >
        <img v-if="isSafari" src="~/@/assets/images/red_packet/06.png" style="width:65%"/>
        <img v-else src="~/@/assets/images/red_packet/06.png"/>
      </div>
    </div>
    <el-dialog :visible.sync="open" width="87%" append-to-body="true" :modal="false"
               :show-close="false" class="wallpaperCss" :close-on-click-modal="false" :close-on-press-escape="false">
      <div style="color:white;font-size: 18px;font-weight: 800;padding-bottom: 10px;">Hold to save this wallpaper
      </div>
      <div
        style="text-align: center;padding-right: 5px;padding-left: 5px;" v-if="wallpaper">
        <img v-if="isSafari" style="width: 70%;border: 1px solid #f9e073; border-radius: 50px"
             :src="wallpaper.wallpaper" alt="">
        <img v-else style="width: 90%;border: 5px solid #f9e073; border-radius: 5px"
             :src="wallpaper.wallpaper" alt=""/>
      </div>
      <div style="color:white;font-size: 18px;font-weight: 800;padding-top: 10px">Hold to save this wallpaper
      </div>
      <!--<p>操作系统:{{ modelData.os }}</p>
      <p>手机品牌:{{ modelData.phone }}</p>
      <p>设备型号:{{ modelData.model }}</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">立即下载</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>-->
    </el-dialog>
    <div class="box1" v-if="isSubmit>0">
      <div class="header">
        Hold to save this wallpaper
      </div>
      <div class="middle">
        <div v-if="wallpaper">
          <img v-if="isSafari"
               :src="wallpaper.wallpaper" alt=""/>
          <img v-else
               :src="wallpaper.wallpaper" alt=""/>
        </div>
        <!--<div v-if="wallpaper" :style="{backgroundImage:`url(${wallpaper.wallpaper})`}"></div>-->
      </div>
      <div class="footer">
        Hold to save this wallpaper
      </div>
    </div>
  </div>
</template>

<script>
import {listWallpaper} from "@/api/system/red_packet/wp";
import {addLog} from "@/api/system/red_packet/take";
import {random} from "lodash";
import RedPacket from "@/api/RedPacket";
import MobileDetect from "mobile-detect";
import html2canvas from "html2canvas";
import icon1 from "../assets/images/red_packet/icon1.jpg";
import icon2 from "../assets/images/red_packet/icon2.jpg";
import RedPacketMiddle from "@/api/RedPacketMiddle";
import RedPacketMiddle1 from "../api/RedPacketMiddle1";

export default {
  name: "App",
  data() {
    return {
      boxShow: false,
      boxShowImager: false,
      boxShowImager1: false,
      boxShowImager2: false,
      boxShowImager3: false,
      timer: null,
      timer1: null,
      timer2: null,
      open: false,
      modelData: {
        phone: "",
        model: "",
        os: "",
      },
      wallpaperList: [],
      wallpaperCount: 0,
      wallpaper: null,
      rotationAngle: 0,
      isSubmit: 0,
      screenWidth: 0,
      isSafari: false,
      showBox: 'box'
    };
  },
  beforeMount() {
    this.onFinishs();
  },
  mounted() {
    this.$nextTick(() => {
      listWallpaper().then((res) => {
        this.wallpaperList = res.rows;
        this.wallpaperCount = res.total;
      });
      this.isSubmit = 0;
      this.screenWidth = window.innerWidth
      console.log("浏览器环境：" + navigator.userAgent)
      if (navigator.userAgent.indexOf("Safari") !== -1 && navigator.userAgent.indexOf("Chrome") === -1) {
        this.isSafari = true
      }
    });
  },
  methods: {
    //开启倒计时
    openCountdown() {
      clearInterval(this.timer);
      clearInterval(this.timer1);
      clearInterval(this.timer2);
      this.boxShowImager = false;
      this.boxShowImager1 = true;
      /*   this.$refs.transformB.animate({ height: "0px" }, 1000);
      this.$refs.transformT.animate({ height: "300px" }, 1000); */
      setTimeout(this.openCountdown1, 2000)
    },
    openCountdown1() {
      // this.$refs.transformT1.animate([{ transform: `rotate(50%)` }], 1000);
      this.boxShowImager1 = false;
      this.boxShowImager2 = true;
      this.boxShowImager3 = true;
      this.rotationAngle = 360;
    },
    //倒计时结束
    onFinishs() {
      this.setRedPacket(50, 20000);
      this.setRedPacketMiddle(100, 20000);
      this.setRedPacketMiddle1(150, 20000);
      setTimeout(this.clickRedPacket, 2000);
    },
    //点击红包的回调
    clickRedPacket(val) {
      this.boxShow = true;
      this.boxShowImager = true;
      const userAgent = navigator.userAgent;
      const md = new MobileDetect(userAgent);
      const os = md.os(); //获取系统
      const phone = md.phone(); //获取品牌
      const model = getModel(md, os, userAgent); //设备型号
      this.modelData.os = os;
      this.modelData.phone = phone;
      this.modelData.model = model;
      addLog({
        isDownload: "0",
        os: os,
        phone: phone,
        model: model,
      }).then((res) => {
      }).catch(function (error) {
        console.log(error)
      });
      let randomNumber = Math.floor(Math.random() * 5);
      randomNumber = randomNumber === 5 ? 4 : randomNumber;
      console.log(randomNumber)
      this.wallpaper = this.wallpaperList[randomNumber];
      console.log(this.wallpaper)
      if (this.wallpaper == undefined) {
        this.wallpaper = this.wallpaperList[0];
      }
      this.wallpaper.path = 'https://wishingtag.pollyvv.com/prod-api' + this.wallpaper.path;
      this.wallpaper.wallpaper = 'https://wishingtag.pollyvv.com/prod-api' + this.wallpaper.wallpaper;
    },
    setRedPacket(speed, time) {
      this.timer = setInterval(() => {
        const randomValue = Math.floor(Math.random() * 2); // 0||1
        new RedPacket({
          parent: this.$refs.RedPacketBox,
          type: random(0, 10),
          callback: this.clickRedPacket,
          url: randomValue == 0 ? icon2 : icon2,
          giftUrl: randomValue == 0 ? icon2 : icon2,
        });
      }, speed);
    },
    setRedPacketMiddle(speed, time) {
      this.timer1 = setInterval(() => {
        const randomValue = Math.floor(Math.random() * 2); // 0||1
        new RedPacketMiddle({
          parent: this.$refs.RedPacketBox,
          type: random(0, 10),
          callback: this.clickRedPacket,
          url: randomValue == 0 ? icon2 : icon2,
          giftUrl: randomValue == 0 ? icon2 : icon2,
        });
      }, speed);
    },
    setRedPacketMiddle1(speed, time) {
      this.timer2 = setInterval(() => {
        const randomValue = Math.floor(Math.random() * 2); // 0||1
        new RedPacketMiddle1({
          parent: this.$refs.RedPacketBox,
          type: random(0, 10),
          callback: this.clickRedPacket,
          url: randomValue == 0 ? icon2 : icon2,
          giftUrl: randomValue == 0 ? icon2 : icon2,
        });
      }, speed);
    },
    submitForm() {
      if (this.isSubmit <= 0) {
        addLog({
          isDownload: 1,
          os: this.modelData.os,
          phone: this.modelData.phone,
          model: this.modelData.model,
          wallpaperId: this.wallpaper.id,
        }).then((res) => {
          this.isSubmit = 1
          //this.open = true;
          this.boxShow = false
          this.showBox = 'box1'
          //downloadImage(this.wallpaper.wallpaper, this.wallpaper.title);
        }).catch(function (error) {
          console.log(error)
        });
      } else {
        this.$modal.msgSuccess("已下载壁纸");
      }
    },
    cancel() {
      this.open = false;
      this.boxShow = false;
      this.onFinishs();
    },
  },
};

function isWeixinBrowser() {
  let ua = navigator.userAgent.toLowerCase();
  //alert(JSON.stringify(ua))
  //通过正则表达式匹配ua中是否含有MicroMessenger字符串
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    return true;
  } else {
    return false;
  }
}

function downloadImage(url, filename) {
  console.log(url, filename)
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

function getModel(md, os, userAgent) {
  let model = "";
  if (userAgent.split(")")[0].includes("HMSCore")) {
    // 获取华为鸿蒙
    let HMS = userAgent.split(")")[0].split("HMSCore")[0].split(";");
    model = HMS[HMS.length - 2];
  } else if (os == "iOS") {
    //ios系统的处理
    // @ts-ignore
    model = md.mobile();
    // console.log(md.mobile(), os, '获取系统', os == 'iOS');
    if (model == "iPhone") {
      let iphoneArr = [
        ["430,932,3", "A15", "iPhone 14 Pro Max"],
        ["393,852,3", "A15", "iPhone 14 Pro"],
        ["375,812,3", "A15", "iPhone 13(12) min"],
        ["428,926,3", "A14", "iPhone 14(12/13) Plus"],
        ["390,844,3", "A14", "iPhone 14(12/13)"],
        ["414,896,3", "A13", "iPhone 11 Pro Max(Xs Max)"],
        ["375,812,3", "A13", "iPhone 11 Pro(X/Xs)"],
        ["414,896,2", "A13", "iPhone 11(XR)"],
        ["414,736,3", "A12", "iPhone 8(7/6s) Plus"],
        ["375,667,2", "A11", "iPhone 8(7/6)"],
        ["320,568,2", "A11", "iPhone 5(s/se)"],
        ["320,480,2", "A10", "iPhone 4(s)"],
      ];
      // 获取GPU信息
      var canvas = document.createElement("canvas"),
        gl = canvas.getContext("experimental-webgl"),
        // @ts-ignore
        debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
      // @ts-ignore

      let iphoneGPU = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
      let width = window.screen.width;
      let height = window.screen.height;
      let devicePixelRatio = window.devicePixelRatio;
      let baseInfo = width + "," + height + "," + devicePixelRatio;
      iphoneArr.some((item) => {
        if (item[0] === baseInfo) {
          model = item[2];
          console.log("iphoneGPU", iphoneGPU == item[1]);
        }
      });
    } else {
      model = "iPad";
    }
  } else if (os == "AndroidOS") {
    //Android系统的处理
    var j;
    var sss = userAgent.split(";");
    for (var i = 0; i < sss.length; i++) {
      if (sss[i].indexOf("Build/") > 0) {
        j = i;
        break;
      }
    }
    // @ts-ignore
    if (j > -1) {
      // @ts-ignore
      model = sss[j].substring(0, sss[j].indexOf("Build/"));
    }
  }
  return model;
}
</script>

<style lang="scss">
.box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../assets/images/red_packet/07.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.box1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fe4335;
  text-align: center;

  .header {
    position: absolute;
    top: 0;
  }

  .middle {
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 60px;
    background-color: #fe4335;
    text-align: center;
  }

  .middle div {
    height: 100%;
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
  }

  .middle div img {
    width: 100%;
    height: 100%;
    border: 7px solid #f9e073;
    border-radius: 5px;
    object-fit: cover;
    object-position: bottom;
  }

  .footer {
    position: absolute;
    bottom: 0;
  }

  .header, .footer {
    background: #fe4335;
    width: 100%;
    text-align: center;
    height: 60px;
    line-height: 60px;
    color: white;
    font-size: 16px;
    font-weight: 800;
  }
}

.transformB {
  position: fixed;
  bottom: -198px;
  width: 100%;
  text-align: center;
  opacity: 0;

  &.show {
    animation: transformBShow 1s forwards;
  }

  @keyframes transformBShow {
    0% {
      opacity: 0;
      bottom: -198px;
    }
    100% {
      opacity: 1;
      bottom: 0px;
    }
  }

  img {
    width: 70%; /**苹果**/
    //width: calc(100% - 95px);
    vertical-align: bottom;
  }
}

@keyframes wrapper-gradient {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes img-gradient {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

.transformT {
  position: fixed;
  top: -441px;
  width: 100%;
  margin-top: 19%;
  text-align: center;
  opacity: 0;
  perspective: 1000px;

  &.show {
    animation: transformTShow 1s forwards;
  }

  @keyframes transformTShow {
    0% {
      opacity: 0;
      top: -441px;
    }
    100% {
      opacity: 1;
      top: 0px;
    }
  }

  .img-1 {
    transition: all 1s;
    opacity: 1;

    &.hide {
      transform-origin: center;
      transform: rotateY(180deg);
      opacity: 0;
    }
  }

  .img-2 {
    opacity: 0;
    transition: all 1s;
    transform: rotateY(-180deg);

    &.show {
      opacity: 1;
      transform-origin: center;
      transform: rotateY(0deg);
    }
  }

  img {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    transform-origin: center;
    width: 75%; /**苹果**/
    //width: calc(100% - 84px);
  }
}

.wallpaperCss {
  text-align: center;
  font-size: 12px;

  .el-dialog {
    background: rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
    opacity: 0.9;
  }

  .el-dialog__header {
    padding: 0px !important;
  }

  .el-dialog__body {
    padding: 0px !important;
  }
}

/* 对应宽度的屏幕 1:1 */
@media only screen and (max-width: 320px) {
  .transformT img {
    width: 74%;
  }
  .transformB img {
    width: 70%; /**苹果**/
  }
}

/* 对应宽度的屏幕 2:1 */
@media only screen and (min-width: 320px) and (max-width: 390px) {
  .transformT img {
    width: 83%;
  }
  .transformB img {
    width: 77%; /**苹果**/
  }
}

/* 对应宽度的屏幕 3:1 */
@media only screen and (min-width: 390px) {
  .transformT img {
    width: 82%;
  }
  .transformB img {
    width: 76%; /**苹果**/
  }
}
</style>
